<template>
  <div class="crm-page home-page">
    <div class="page-header">销售业绩</div>
    <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">

        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.orgType" @change="handleChange">
            <el-option value="2" label="个人" />
            <el-option value="1" label="部门" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.searchType" @change="handleChange">
            <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="page-content">
      <div class="page-report-chart">
        <saleGaugeChart ref="saleGaugeChart" />
      </div>
      <div class="">
        <base-table ref="table" :show-summary="true" :get-summaries="getSummaries" height="300" :pagination="false" style="padding-top:20px;width:800px;margin:0 auto" :load-data="loadData">
          <el-table-column
            label="合同编号"
            prop="contractNumber"
            align="center"
          >
            <template slot-scope="{row}">
              <span class="app-link" @click="gotoMainPage('contract/info',{id:row.contractId})">{{ row.contractNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="合同名称"
            prop="contractName"
            align="center"
          />
          <el-table-column
            label="客户名称"
            prop="customerName"
            align="center"
          >
            <template slot-scope="{row}">
              <span class="app-link" @click="gotoMainPage('customer/info',{id:row.customerId})">{{ row.customerName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="签约时间"
            prop="date"
            align="center"
          >
            <template slot-scope="{row}">
              {{ row.date| dateFormat('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column
            label="金额（元）"
            prop="amount"
            align="center"
          >
            <template slot-scope="{row}">
              {{ row.amount| moneyFormat }}
            </template>
          </el-table-column>
        </base-table>
      </div>
    </div>
  </div>
</template>
<script>
import saleGaugeChart from '../home/components/saleGaugeChart.vue'
import { dateTypes } from '@/utils/enums'
import { getSalesAchievement } from '@/api/chart'
import BigNumber from 'bignumber.js'
export default {
  name: 'SaleTargets',
  components: { saleGaugeChart },
  data() {
    return {
      dateTypes,
      queryParam: {
        searchType: 7,
        orgType: '2'
      }
    }
  },
  methods: {
    loadData() {
      const params = this.getURLParams()
      if (params && params.dateType) {
        this.queryParam.searchType = Number(params.dateType)
      }
      // getsalesPerformance 获取销售业绩
      return getSalesAchievement({ searchType: this.queryParam.searchType, businessType: 1, orgType: this.queryParam.orgType }).then((res) => {
      //
        console.log('111111:', res)
        const data = {
          title: '',
          value: BigNumber(res.contractTotal).dividedBy(10000).toFixed(2),
          target: BigNumber(res.targetTotal).dividedBy(10000).toFixed(2)
        }

        this.$refs.saleGaugeChart.initChart(data)

        return { records: res.list }
      })
    },
    handleChange() {
      this.handleSearch()
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => {
          if (['amount'].indexOf(column.property) < 0) {
            return undefined
          }
          return Number(item[column.property])
        })
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          const fmt = {
            prefix: '',
            decimalSeparator: '.',
            groupSeparator: ',',
            groupSize: 3,
            secondaryGroupSize: 3
          }
          sums[index] = BigNumber(sums[index]).toFormat(2, fmt)
        } else {
          sums[index] = ''
        }
      })
      console.log('sums:', sums)
      return sums
    }
  }
}
</script>
